<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '特色景点',
  },
}
</route>
<template>
  <view class="w-screen overflow-hidden bg-#f6f6f6 min-h-100vh box-border p-20rpx">
    <!-- <view class="bg-#F6F6F6 overflow-auto w-100% h-screen box-border p-20rpx"> -->
    <view class="tab_cont" @click="handleClickLeft">
      <wd-icon name="thin-arrow-left" size="18" color="#6B6B6B" />
    </view>
    <wd-row :gutter="10">
      <wd-col :span="12">
        <view class="mb-20rpx" @click="handleDetail(item.id)" v-for="item in listLeft" :key="item">
          <image
            v-if="item && item.fileDOList && item.fileDOList.length != 0"
            class="w-100% h-276rpx published-img"
            :src="item.fileDOList[0].url"
            @click="handleDetail(item.id)"
          ></image>
          <view
            v-else
            class="w-100% h-276rpx published-img"
            style="
              font-size: 28rpx;
              line-height: 276rpx;
              color: #333333;
              text-align: center;
              background-color: rgb(247 247 247);
              border: 1rpx solid #ccc !important;
            "
          >
            暂无图片
          </view>
          <view class="bg-#fff w-100% py-20rpx box-border">
            <view @click="handleDetail(item.id)">
              <view class="title mb-6rpx px-20rpx">
                {{ item.scenicName }}
              </view>
              <view class="px-20rpx flex" style="flex-wrap: wrap">
                <view class="mr-10rpx" v-for="item in item.scenicLabel" :key="item">
                  <wd-tag
                    style="min-width: 40rpx; font-size: 18rpx; text-align: center"
                    color="#AD0E0E"
                    bg-color="#AD0E0E"
                    plain
                  >
                    {{ item }}
                  </wd-tag>
                </view>
              </view>
            </view>
            <view class="card-line"></view>
            <view class="flex items-center justify-between px-20rpx">
              <view>
                <span class="per-money mr-8rpx">¥{{ item.consumption }}</span>
                <span class="per-capita">人均</span>
              </view>
            </view>
          </view>
        </view>
      </wd-col>
      <wd-col :span="12">
        <view class="mb-20rpx" @click="handleDetail(item.id)" v-for="item in listRight" :key="item">
          <image
            v-if="item && item.fileDOList && item.fileDOList.length != 0"
            class="w-100% h-276rpx published-img"
            :src="item.fileDOList[0].url"
            @click="handleDetail(item.id)"
          ></image>
          <view
            v-else
            class="w-100% h-276rpx published-img"
            style="
              font-size: 28rpx;
              line-height: 276rpx;
              color: #333333;
              text-align: center;
              background-color: rgb(247 247 247);
              border: 1rpx solid #ccc !important;
            "
          >
            暂无图片
          </view>
          <view class="bg-#fff w-100% py-20rpx box-border">
            <view @click="handleDetail(item.id)">
              <view class="title mb-6rpx px-20rpx">
                {{ item.scenicName }}
              </view>
              <view class="px-20rpx flex" style="flex-wrap: wrap">
                <view class="mr-10rpx" v-for="item in item.scenicLabel" :key="item">
                  <wd-tag
                    style="min-width: 40rpx; font-size: 18rpx; text-align: center"
                    color="#AD0E0E"
                    bg-color="#AD0E0E"
                    plain
                  >
                    {{ item }}
                  </wd-tag>
                </view>
              </view>
            </view>
            <view class="card-line"></view>
            <view class="flex items-center justify-between px-20rpx">
              <view>
                <span class="per-money mr-8rpx">¥{{ item.consumption }}</span>
                <span class="per-capita">人均</span>
              </view>
            </view>
          </view>
        </view>
      </wd-col>
    </wd-row>
    <wd-loadmore v-if="list.length > 0" :state="state" @reload="loadmore" />
  </view>
</template>

<script lang="ts" setup>
import * as getApi from '../../../service/TouristCenter/index'
function handleClickLeft() {
  uni.navigateBack()
}
const handleDetail = (id) => {
  uni.navigateTo({
    url: '/pages/TouristCenter/ScenicSpot/scenicspotDetails?id=' + id,
  })
}
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)
const state = ref<string>('loading')
const max = ref<number>(60)
// 获得特色景点分页
const list = ref([])
const listLeft = ref([])
const listRight = ref([])
const scenicspot = reactive({
  pageNo: 1,
  pageSize: 10,
  name: '',
  status: 2,
  origin: 'h5',
})
async function getScenicspot() {
  const data: any = await getApi.getScenicspotPage({ ...scenicspot })
  list.value.push(...data.data.list)
  max.value = data.data.total
  data.data.list.forEach((item) => {
    item.scenicLabel = item.scenicLabel.split(',')
    item.fileDOList = item.fileDOList.reverse().map((item) => {
      item.url = `${baseurl.value}${item.url}`
      return item
    })
  })
  list.value.length === max.value ? (state.value = 'finished') : (state.value = 'loading')
  // 分割 list 到 listLeft 和 listRight
  listLeft.value = []
  listRight.value = []
  list.value.forEach((item, index) => {
    if (index % 2 === 0) {
      listLeft.value.push(item)
    } else {
      listRight.value.push(item)
    }
  })
}

onLoad(() => {
  getScenicspot()
  uni.$on('refreshPage', refreshPage)
})
onUnload(() => {
  uni.$off('refreshPage', refreshPage)
})
function refreshPage() {
  list.value = []
  getScenicspot()
}
function loadmore() {
  state.value = 'loading'
  setTimeout(() => {
    getScenicspot()
  }, 1000)
}
onReachBottom(() => {
  if (list.value.length === max.value) {
    state.value = 'finished'
  } else if (list.value.length < max.value) {
    scenicspot.pageNo += 1
    loadmore()
  }
})
</script>
<style scoped>
::v-deep .wd-tag__text {
  display: block !important;
  min-height: 12px;
  padding-top: 4rpx !important;
  padding-bottom: 4rpx !important;
  line-height: 12px;
}

::v-deep .wd-tag {
  display: block !important;
  margin-top: 10rpx !important;
}
.published-img {
  border-radius: 20rpx 20rpx 0px 0px;
}
.title {
  font-size: 26rpx;
  font-weight: 500;
  line-height: 21px;
  color: rgb(16 16, 16);
  text-align: justify;
}
.per-money {
  display: inline-block;
  font-size: 26rpx;
  font-weight: 500;
  color: rgba(215, 8, 8, 1);
  text-align: left;
  vertical-align: bottom;
}
.per-capita {
  display: inline-block;
  font-size: 16rpx;
  font-weight: 500;
  color: rgba(123, 123, 123, 1);
  text-align: left;
}
.card-line {
  margin: 20rpx 0rpx;
  border: 1px solid rgba(238, 238, 238, 1);
}

.tab_cont {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  z-index: 999;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.57);
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 50px;
}
/*
::v-deep .uni-page-head__title {
  display: none;
}*/
</style>
